/** * Create by mzq * Description: 资料中心弹框 * Date: 2025/2/11 15:50 *
Update: 2025/2/11 15:50 */

<template>
  <view class="data-center-dialog">
    <MyDiaLog
      :width="900"
      :visible="visible"
      :titleName="titleName"
      @close="handleClose">
      <template>
        <!-- 搜索区域 -->
        <view class="search-wrapper">
          <view class="search-box">
            <input
              v-model="searchName"
              class="search-input"
              type="text"
              placeholder="请输入姓名" />
            <button class="search-btn" @click="handleSearch">查询</button>
          </view>
        </view>

        <!-- 添加加载进度指示器 -->
        <view v-if="loading && !allBatchesLoaded" class="loading-progress">
          <view class="progress-text">正在加载数据 ({{ loadProgress }}%)</view>
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: loadProgress + '%' }"></view>
          </view>
        </view>

        <uni-table
          ref="table"
          :loading="loading"
          border
          stripe
          emptyText="暂无更多数据">
          <uni-tr>
            <uni-th width="150" align="center">编号</uni-th>
            <uni-th width="100" align="center">姓名</uni-th>
            <uni-th width="80" align="center">性别</uni-th>
            <uni-th width="120" align="center">住院号</uni-th>
            <uni-th width="160" align="center">创建时间</uni-th>
            <uni-th width="100" align="center">操作人</uni-th>
            <uni-th width="120" align="center">操作</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in tableData" :key="index">
            <uni-td align="center">{{ item.id }}</uni-td>
            <uni-td align="center">{{ item.name }}</uni-td>
            <uni-td align="center">{{ item.sex }}</uni-td>
            <uni-td align="center">{{ item.admissionNumber }}</uni-td>
            <uni-td align="center">{{ item.createData }}</uni-td>
            <uni-td align="center">{{ item.operator }}</uni-td>
            <uni-td align="center">
              <view class="uni-group">
                <text class="action-text" @click="handleEdit(item)">查看</text>
                <text
                  class="action-text delete-text"
                  @click="handleDelete(item.id)"
                  >删除</text
                >
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>

        <!-- 分页组件 -->
        <view class="pagination-wrapper">
          <uni-pagination
            class="custom-pagination"
            :total="total"
            :pageSize="pageSize"
            :current="currentPage"
            @change="handlePageChange"
            showIcon>
          </uni-pagination>
        </view>
      </template>
    </MyDiaLog>

    <!-- 添加 LaboratoryReport 组件 -->
    <LaboratoryReport
      v-if="showLaboratoryReport"
      :reportData="currentReportData"
      @update:reportData="updateReportData"
      @updateTable="getPatient"
      @close="handleCloseLaboratory" />
  </view>
</template>

<script>
import MyDiaLog from '@/components/MyDiaLog/MyDiaLog.vue'
import { readJsonFromFile, writeJsonToFile, deleteById } from '@/utils/fileUtil'
import { mapState, mapMutations, mapActions } from 'vuex'
import LaboratoryReport from '@/components/LaboratoryReport/LaboratoryReport.vue'
export default {
  name: 'DataCenterDialog',
  components: {
    LaboratoryReport,
    MyDiaLog,
  },
  data() {
    return {
      visible: true,
      titleName: '资料中心',
      loading: false,
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示条数
      total: 0, // 总条数
      originalData: [], // 原始数据
      searchName: '', // 搜索姓名
      filteredData: [], // 过滤后的数据
      showLaboratoryReport: false,
      currentReportData: null, // 添加存储当前选中的数据
      
      // 添加缓存和加载状态
      patientCache: {}, // 患者数据缓存
      loadingPatientIds: false, // 是否正在加载患者ID列表
      patientIdsLoaded: false, // 患者ID列表是否已加载
      patientIds: [], // 患者ID列表
      
      // 添加分批加载控制
      batchSize: 10, // 每批加载的患者数量
      currentBatchIndex: 0, // 当前批次索引
      loadingBatch: false, // 是否正在加载批次
      allBatchesLoaded: false, // 是否已加载所有批次
      
      // 添加加载进度
      loadProgress: 0, // 加载进度(0-100)
    }
  },
  methods: {
    // 获取患者信息并更新表格 - 优化版本
    async getPatient() {
      if (this.loading) return; // 防止重复加载
      
      // 重置状态
      this.originalData = [];
      this.filteredData = [];
      // 保留缓存，避免重复加载
      // this.patientCache = {};
      this.patientIdsLoaded = false;
      this.patientIds = [];
      this.currentBatchIndex = 0;
      this.allBatchesLoaded = false;
      this.loadProgress = 0;
      
      this.loading = true;
      
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载数据...',
          mask: true
        });
        
        // 1. 首先加载患者ID列表
        await this.loadPatientIds();
        
        // 2. 分批加载患者数据
        this.loadPatientBatches();
        
        // 3. 预加载下一批数据
        this.preloadNextBatch();
      } catch (error) {
        console.error('获取患者数据失败：', error);
        uni.showToast({
          title: '加载数据失败',
          icon: 'none'
        });
        this.loading = false;
        uni.hideLoading();
      }
    },
    
    // 加载患者ID列表
    async loadPatientIds() {
      // 如果已经加载过，直接返回
      if (this.patientIdsLoaded) return;
      
      this.loadingPatientIds = true;
      
      try {
        // 读取患者ID文件
        const patientIdsFile = '/sdcard/test/patient_ids.json';
        const patientIdsData = readJsonFromFile(patientIdsFile) || [];
        
        // 将数据转换为数组格式
        const patientIds = Array.isArray(patientIdsData) ? patientIdsData : [patientIdsData];
        
        // 过滤掉无效的ID
        this.patientIds = patientIds.filter(item => item && item.id);
        
        console.log(`初步加载了 ${this.patientIds.length} 个患者ID，开始验证数据完整性`);
        
        // 验证每个患者数据的完整性
        await this.validatePatientDataIntegrity();
        
        // 设置总数
        this.total = this.patientIds.length;
        
        console.log(`验证后加载了 ${this.patientIds.length} 个有效患者ID`);
      } catch (error) {
        console.error('加载患者ID失败：', error);
        this.patientIds = [];
        this.total = 0;
      } finally {
        this.loadingPatientIds = false;
      }
    },
    
    // 分批加载患者数据
    loadPatientBatches() {
      // 如果已经加载完所有批次，直接更新表格
      if (this.allBatchesLoaded) {
        this.updateTableData();
        this.loading = false;
        uni.hideLoading();
        return;
      }
      
      // 如果正在加载批次，不重复加载
      if (this.loadingBatch) return;
      
      this.loadingBatch = true;
      
      // 计算当前批次的起始和结束索引
      const start = this.currentBatchIndex * this.batchSize;
      const end = Math.min(start + this.batchSize, this.patientIds.length);
      
      // 如果已经加载完所有批次，标记完成
      if (start >= this.patientIds.length) {
        this.allBatchesLoaded = true;
        this.loadingBatch = false;
        this.loading = false;
        this.updateTableData();
        uni.hideLoading();
        return;
      }
      
      // 获取当前批次的患者ID
      const batchIds = this.patientIds.slice(start, end);
      
      // 更新加载进度
      this.loadProgress = Math.floor((start / this.patientIds.length) * 100);
      
      // 异步加载当前批次的患者数据
      setTimeout(async () => {
        try {
          // 并行加载当前批次的患者数据
          const batchPromises = batchIds.map(idObj => this.loadPatientData(idObj.id));
          
          // 使用Promise.allSettled代替Promise.all，避免一个失败导致整批失败
          const results = await Promise.allSettled(batchPromises);
          
          // 过滤出成功的结果
          const validPatients = results
            .filter(result => result.status === 'fulfilled' && result.value)
            .map(result => result.value);
          
          // 添加到原始数据中
          this.originalData = [...this.originalData, ...validPatients];
          
          // 更新过滤后的数据
          if (!this.searchName.trim()) {
            this.filteredData = [...this.originalData];
          } else {
            // 应用当前的搜索过滤
            this.filteredData = this.originalData.filter((item) =>
              item.name.toLowerCase().includes(this.searchName.toLowerCase())
            );
          }
          
          // 按创建时间降序排序
          this.originalData.sort((a, b) => {
            const dateA = new Date(a.createData || a.createTime || 0);
            const dateB = new Date(b.createData || b.createTime || 0);
            return dateB - dateA;
          });
          
          this.filteredData.sort((a, b) => {
            const dateA = new Date(a.createData || a.createTime || 0);
            const dateB = new Date(b.createData || b.createTime || 0);
            return dateB - dateA;
          });
          
          // 更新表格数据
          this.updateTableData();
          
          // 更新批次索引
          this.currentBatchIndex++;
          
          // 预加载下一批数据
          this.preloadNextBatch();
          
          // 检查是否加载完所有批次
          if (end >= this.patientIds.length) {
            this.allBatchesLoaded = true;
            this.loading = false;
            console.log('所有患者数据加载完成');
            uni.hideLoading();
          } else {
            // 继续加载下一批
            this.loadingBatch = false;
            this.loadPatientBatches();
          }
        } catch (error) {
          console.error('加载患者批次数据失败：', error);
          this.loadingBatch = false;
          this.loading = false;
          uni.hideLoading();
        }
      }, 0);
    },
    
    // 加载单个患者数据
    async loadPatientData(patientId) {
      // 如果缓存中已有该患者数据，直接返回
      if (this.patientCache[patientId]) {
        return this.patientCache[patientId];
      }
      
      try {
        // 只读取表格显示所需的字段，使用缓存
        const requiredFields = ['id', 'name', 'sex', 'age', 'admissionNumber', 'Department', 'diagnosis', 'operator', 'createData', 'createTime'];
        const patientReportFile = `/sdcard/test/${patientId}.json`;
        
        // 使用字段过滤和缓存
        const patientReport = readJsonFromFile(patientReportFile);
        
        if (patientReport) {
          // 如果是数组，取第一个元素
          const fullData = Array.isArray(patientReport) ? patientReport[0] : patientReport;
          
          // 验证数据完整性，确保包含必要的脑电数据
          const hasCompleteData = fullData && 
            fullData.leftBrainImpedance && 
            fullData.rightBrainImpedance && 
            fullData.allBrainImpedance && 
            fullData.stabilityWholeBrain;
            
          if (!hasCompleteData) {
            console.log(`患者 ${patientId} 数据不完整，缺少必要的脑电数据字段，跳过加载`);
            return null;
          }
          
          // 创建轻量级数据对象，只包含表格显示所需的基本信息
          const lightData = {
            id: fullData.id,
            name: fullData.name || '未知患者',
            sex: fullData.sex || '',
            age: fullData.age || '',
            admissionNumber: fullData.admissionNumber || '',
            Department: fullData.Department || '',
            diagnosis: fullData.diagnosis || '',
            operator: fullData.operator || '',
            createData: fullData.createData || fullData.createTime || '',
            hasCompleteData: true, // 标记数据完整性
          };
          
          // 缓存轻量级数据
          this.patientCache[patientId] = lightData;
          
          // 异步加载完整数据
          this.loadFullPatientDataAsync(patientId);
          
          // 返回轻量级数据用于表格显示
          return lightData;
        }
        
        return null;
      } catch (error) {
        console.error(`加载患者 ${patientId} 数据失败：`, error);
        return null;
      }
    },
    
    // 异步加载完整患者数据
    loadFullPatientDataAsync(patientId) {
      // 如果缓存中已有完整数据，不需要重新加载
      if (this.patientCache[patientId] && this.patientCache[patientId].fullDataLoaded) {
        return;
      }
      
      // 使用Web Worker或setTimeout避免阻塞UI
      setTimeout(() => {
        try {
          // 读取完整报告文件，使用缓存
          const patientReportFile = `/sdcard/test/${patientId}.json`;
          const patientReport = readJsonFromFile(patientReportFile);
          
          if (patientReport) {
            // 如果是数组，取第一个元素
            const fullData = Array.isArray(patientReport) ? patientReport[0] : patientReport;
            
            // 合并轻量级数据和完整数据
            const currentData = this.patientCache[patientId] || {};
            this.patientCache[patientId] = {
              ...currentData,
              ...fullData,
              fullDataLoaded: true
            };
            
            // 如果当前正在查看该患者的报告，更新报告数据
            if (this.showLaboratoryReport && this.currentReportData && this.currentReportData.id === patientId) {
              this.currentReportData = this.patientCache[patientId];
            }
          }
        } catch (error) {
          console.error(`异步加载患者 ${patientId} 完整数据失败：`, error);
        }
      }, 100); // 减少延迟时间，提高响应速度
    },

    handleClose() {
      this.$emit('close')
    },

    /**
     * 处理分页变化
     */
    handlePageChange(e) {
      this.currentPage = e.current
      this.updateTableData()
    },

    /**
     * 更新表格数据
     */
    updateTableData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      // 使用过滤后的数据进行分页
      this.tableData = this.filteredData.slice(start, end)
    },

    /**
     * 处理文件下载
     */
    handleDownload(file) {
      console.log('下载文件：', file)
      // TODO: 实现文件下载逻辑
    },

    /**
     * 处理编辑
     */
    handleEdit(item) {
      console.log('查看：', item)
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载报告...',
          mask: true
        });
        
        // 检查是否有完整数据缓存
        if (this.patientCache[item.id] && this.patientCache[item.id].fullDataLoaded) {
          // 使用缓存的完整数据
          this.currentReportData = this.patientCache[item.id];
          this.showLaboratoryReport = true;
          uni.hideLoading();
        } else {
          // 需要加载完整数据，使用缓存
          const patientReportFile = `/sdcard/test/${item.id}.json`;
          const patientReport = readJsonFromFile(patientReportFile);
          
          if (patientReport) {
            // 如果是数组，取第一个元素
            const fullData = Array.isArray(patientReport) ? patientReport[0] : patientReport;
            
            // 验证数据完整性，确保包含必要的脑电数据
            const hasCompleteData = fullData && 
              fullData.leftBrainImpedance && 
              fullData.rightBrainImpedance && 
              fullData.allBrainImpedance && 
              fullData.stabilityWholeBrain;
              
            if (!hasCompleteData) {
              uni.hideLoading();
              uni.showToast({
                title: '患者数据不完整，无法查看',
                icon: 'none'
              });
              return;
            }
            
            // 合并轻量级数据和完整数据
            const currentData = this.patientCache[item.id] || {};
            this.patientCache[item.id] = {
              ...currentData,
              ...fullData,
              fullDataLoaded: true
            };
            
            // 设置当前报告数据
            this.currentReportData = this.patientCache[item.id];
            this.showLaboratoryReport = true;
          } else {
            uni.showToast({
              title: '未找到患者数据',
              icon: 'none'
            });
          }
          
          uni.hideLoading();
        }
      } catch (error) {
        console.error('读取数据失败：', error)
        uni.hideLoading();
        uni.showToast({
          title: '读取数据失败',
          icon: 'none'
        })
      }
    },

    /**
     * 处理删除
     */
    handleDelete(id) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该记录吗？',
        success: (res) => {
          if (res.confirm) {
            try {
              console.log('开始删除ID为', id, '的患者记录');
              
              // 显示加载提示
              uni.showLoading({
                title: '正在删除...',
                mask: true
              });
              
              // 1. 删除患者报告文件
              const patientReportFile = `/sdcard/test/${id}.json`;
              console.log('删除患者报告文件:', patientReportFile);
              
              // 使用File API直接删除文件，确保文件被正确删除
              const File = plus.android.importClass("java.io.File");
              const reportFile = new File(patientReportFile);
              let deleteResult1 = false;
              
              if (reportFile.exists()) {
                deleteResult1 = reportFile.delete();
                console.log('患者报告文件删除结果:', deleteResult1);
              } else {
                console.log('患者报告文件不存在，尝试检查其他可能的路径');
                
                // 尝试检查其他可能的路径
                const alternativePaths = [
                  `/sdcard/test/${id}.json`,
                  `/storage/emulated/0/test/${id}.json`,
                  `/storage/emulated/0/Android/data/io.dcloud.YIAI/test/${id}.json`
                ];
                
                for (const path of alternativePaths) {
                  const altFile = new File(path);
                  if (altFile.exists()) {
                    deleteResult1 = altFile.delete();
                    console.log(`在路径 ${path} 找到并删除文件，结果:`, deleteResult1);
                    break;
                  }
                }
              }
              
              // 2. 从患者ID文件中删除该ID
              const patientIdsFile = '/sdcard/test/patient_ids.json';
              console.log('读取患者ID文件:', patientIdsFile);
              
              // 读取患者ID文件
              const patientIdsData = readJsonFromFile(patientIdsFile) || [];
              
              // 将数据转换为数组格式
              let patientIds = Array.isArray(patientIdsData) ? patientIdsData : [patientIdsData];
              console.log('当前患者ID列表:', patientIds);
              
              // 过滤掉要删除的ID
              const filteredIds = patientIds.filter(item => item && item.id !== id);
              console.log('过滤后的患者ID列表:', filteredIds);
              
              // 重新写入患者ID文件，使用替换模式
              const deleteResult2 = writeJsonToFile(filteredIds, patientIdsFile, true);
              console.log('患者ID文件更新结果:', deleteResult2);
              
              // 隐藏加载提示
              uni.hideLoading();
              
              if (deleteResult1 || deleteResult2) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success',
                });
                
                // 从缓存中移除已删除的患者数据
                if (this.patientCache[id]) {
                  delete this.patientCache[id];
                }
                
                // 从原始数据和过滤后的数据中移除已删除的患者
                this.originalData = this.originalData.filter(item => item.id !== id);
                this.filteredData = this.filteredData.filter(item => item.id !== id);
                
                // 更新总数和表格数据
                this.total = this.filteredData.length;
                this.updateTableData();
                
                // 重新加载患者ID列表
                this.loadPatientIds();
              } else {
                uni.showToast({
                  title: '删除失败',
                  icon: 'none',
                });
              }
            } catch (error) {
              // 隐藏加载提示
              uni.hideLoading();
              
              console.error('删除失败:', error);
              uni.showToast({
                title: '删除失败',
                icon: 'none',
              });
            }
          }
        },
      })
    },

    /**
     * 处理搜索
     */
    handleSearch() {
      if (!this.searchName.trim()) {
        // 如果搜索框为空，显示所有数据
        this.filteredData = [...this.originalData]
      } else {
        // 根据姓名过滤数据
        this.filteredData = this.originalData.filter((item) =>
          item.name.toLowerCase().includes(this.searchName.toLowerCase())
        )
      }
      this.total = this.filteredData.length
      this.currentPage = 1 // 重置到第一页
      this.updateTableData()
    },

    /**
     * 关闭实验室报告
     */
    handleCloseLaboratory() {
      this.showLaboratoryReport = false
      this.currentReportData = null // 清空数据
    },

    updateReportData(newData) {
      this.currentReportData = newData
    },

    // 批量验证患者数据完整性
    async validatePatientDataIntegrity() {
      // 每批验证的患者数量 - 增加批量大小以提高效率
      const batchSize = 50;
      const validPatientIds = [];
      
      // 创建验证结果缓存
      const validationCache = {};
      
      // 分批处理
      for (let i = 0; i < this.patientIds.length; i += batchSize) {
        const batch = this.patientIds.slice(i, i + batchSize);
        
        // 并行验证当前批次
        const validationPromises = batch.map(async (idObj) => {
          try {
            const patientId = idObj.id;
            
            // 检查缓存
            if (validationCache[patientId] !== undefined) {
              return validationCache[patientId] ? idObj : null;
            }
            
            const patientReportFile = `/sdcard/test/${patientId}.json`;
            
            // 只读取必要的字段，使用缓存
            const requiredFields = ['leftBrainImpedance', 'rightBrainImpedance', 'allBrainImpedance', 'stabilityWholeBrain'];
            const patientReport = readJsonFromFile(patientReportFile);
            
            if (patientReport) {
              // 如果是数组，取第一个元素
              const data = Array.isArray(patientReport) ? patientReport[0] : patientReport;
              
              // 验证数据完整性，确保包含必要的脑电数据
              const hasCompleteData = data && 
                data.leftBrainImpedance && 
                data.rightBrainImpedance && 
                data.allBrainImpedance && 
                data.stabilityWholeBrain;
              
              // 缓存验证结果
              validationCache[patientId] = hasCompleteData;
              
              if (hasCompleteData) {
                return idObj;
              } else {
                console.log(`患者 ${patientId} 数据不完整，缺少必要的脑电数据字段，从列表中排除`);
                return null;
              }
            }
            
            // 缓存验证结果
            validationCache[patientId] = false;
            return null;
          } catch (error) {
            console.error(`验证患者 ${idObj.id} 数据完整性失败:`, error);
            return null;
          }
        });
        
        // 等待当前批次的验证结果
        const results = await Promise.all(validationPromises);
        
        // 过滤掉无效结果
        validPatientIds.push(...results.filter(result => result !== null));
        
        // 更新加载进度
        this.loadProgress = Math.floor((i / this.patientIds.length) * 50); // 验证过程占总进度的50%
      }
      
      // 更新为有效的患者ID列表
      this.patientIds = validPatientIds;
      this.patientIdsLoaded = true;
    },

    // 预加载下一批数据
    preloadNextBatch() {
      if (this.currentBatchIndex >= Math.ceil(this.patientIds.length / this.batchSize)) {
        return; // 已经加载完所有批次
      }
      
      const nextBatchIndex = this.currentBatchIndex + 1;
      const start = nextBatchIndex * this.batchSize;
      const end = Math.min(start + this.batchSize, this.patientIds.length);
      
      if (start >= this.patientIds.length) {
        return; // 没有下一批
      }
      
      // 获取下一批的患者ID
      const nextBatchIds = this.patientIds.slice(start, end);
      
      // 异步预加载
      setTimeout(() => {
        nextBatchIds.forEach(idObj => {
          const patientId = idObj.id;
          if (!this.patientCache[patientId]) {
            // 异步加载患者基本数据
            this.loadPatientData(patientId).catch(err => {
              console.error(`预加载患者 ${patientId} 数据失败:`, err);
            });
          }
        });
      }, 500);
    },
  },
  mounted() {
    // 开始加载数据
    this.getPatient();
  },
  computed: {
    ...mapState(['userInfo']),
  },
}
</script>

<style scoped lang="scss">
.data-center-dialog {
  position: relative;

  .uni-group {
    display: flex;
    justify-content: center;
    gap: 15px;

    .action-text {
      font-size: 14px;
      color: #333;
      cursor: pointer;

      &:hover {
        color: #409eff;
      }

      &.delete-text {
        color: #f56c6c;
        
        &:hover {
          color: #f56c6c;
        }
      }
    }
  }

  .search-wrapper {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search-box {
      display: flex;
      align-items: center;
      gap: 10px;

      .search-input {
        width: 200px;
        height: 32px;
        padding: 0 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-size: 14px;

        &:focus {
          border-color: #409eff;
          outline: none;
        }
      }

      .search-btn {
        height: 32px;
        padding: 0 15px;
        background-color: #409eff;
        border: none;
        border-radius: 4px;
        color: white;
        font-size: 14px;
        cursor: pointer;

        &:hover {
          background-color: #66b1ff;
        }
      }
    }
  }
}

.loading-progress {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  width: 100%;

  .progress-text {
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
    text-align: center;
  }

  .progress-bar {
    width: 100%;
    height: 6px;
    background-color: #ebeef5;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
  }

  .progress-fill {
    height: 100%;
    background-color: #409eff;
    border-radius: 3px;
    transition: width 0.3s ease;
  }
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 10px 0;

  /deep/ .custom-pagination {
    .uni-pagination__btn {
      min-width: 32px;
      height: 32px;
      line-height: 32px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      padding: 0;
      margin: 0 4px;
      text-align: center;
      display: inline-block;
      box-sizing: border-box;
      background: #fff;

      &:hover {
        color: #409eff;
        border-color: #409eff;
      }
    }

    .uni-pagination__num {
      margin: 0 8px;
    }

    .uni-pagination__num-tag {
      min-width: 32px;
      height: 32px;
      line-height: 32px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      padding: 0 4px;
      margin: 0 4px;
      text-align: center;
      display: inline-block;
      box-sizing: border-box;
      background: #fff;
      cursor: pointer;

      &:hover {
        color: #409eff;
        border-color: #409eff;
      }

      &.page--active {
        background-color: #409eff !important;
        color: #fff !important;
        border-color: #409eff !important;
        font-weight: bold;

        &:hover {
          color: #fff !important;
        }
      }
    }
  }
}
</style>